<!DOCTYPE html>


<html lang="zh-CN">


<head>
  <meta charset="utf-8" />
  <meta name="baidu-site-verification" content="code-kg5UjKJZM2" />
   
  <meta name="keywords" content="活,炼" />
   
  <meta name="description" content="shimmerjordan" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    Free Static Webpage Deployment |  丛烨-shimmerjordan
  </title>
  <meta name="generator" content="hexo-theme-ayer">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/dist/main.css">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">
  
<link rel="stylesheet" href="/css/custom.css">

  
  <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
  
  

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'G-Q0DT8B8VJW', 'auto');
ga('send', 'pageview');

</script>



  
<script>
var _hmt = _hmt || [];
(function() {
	var hm = document.createElement("script");
	hm.src = "https://hm.baidu.com/hm.js?6d06f826e125297d4ce0fa7a1449328e";
	var s = document.getElementsByTagName("script")[0]; 
	s.parentNode.insertBefore(hm, s);
})();
</script>


<link rel="alternate" href="/atom.xml" title="丛烨-shimmerjordan" type="application/atom+xml">
</head>

</html>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>


<body>
  <div id="app">
    
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-FreeStaticWebpageDeployment"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  Free Static Webpage Deployment
</h1>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/01/24/freeWebpage/" class="article-date">
  <time datetime="2021-01-24T11:05:00.000Z" itemprop="datePublished">2021-01-24</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E6%96%B0%E6%89%8B%E6%8C%87%E5%8C%97/">新手指北</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">1.4k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">8 分钟</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <p>I have a number of static websites on hand, including a CV, an anniversary website, a small blog and miniature functional static pages such as QR code generation that need to be deployed on the internet. The best option would undoubtedly be to deploy on a private cloud server, but the functionality of these sites does not justify renting an expensive server for them. In this context, here is a solution for webpage deployment based on github or bitbucket.</p>
<span id="more"></span>
<h1 id="Overview-of-steps"><a href="#Overview-of-steps" class="headerlink" title="Overview of steps"></a>Overview of steps</h1><ul>
<li>Find an available mailbox;</li>
<li>Sign up for bitbucket or github using your email address;</li>
<li>Configuring local SSH;</li>
<li>Create a cloud repository with a specific name;</li>
<li>Push local repositories to the cloud;</li>
<li>[Option] Binding personal domains.</li>
</ul>
<h1 id="Find-an-available-mailbox"><a href="#Find-an-available-mailbox" class="headerlink" title="Find an available mailbox"></a>Find an available mailbox</h1><p>Of course I can use my personal email, but it is tied to my mobile number and I don’t want to receive relevant tweets or ads. I only use this email address to register for github or bitbucket for the time being and will not need it again once my account is registered. So I opted for a temporary email address provided by a third party (NO PHONE NUMBER NEEDED), and here are some of the things I gathered and tried:</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://www.snapmail.cc/">Snapmail</a>: Always available, but emails will be automatically deleted after 4 hours. I used this email address to successfully sign up for bitbucket and deployed <a target="_blank" rel="noopener" href="https://abadanniversary2.bitbucket.io">https://abadanniversary2.bitbucket.io</a>. </li>
<li><a target="_blank" rel="noopener" href="https://temp-mail.org/">TempMail</a>: It is more widely available, but uses a mailbox for a period of time and does not support customisation., which requires the purchase of additional services at a cost. If you need to change to a new mailbox, you will need to delete the current mailbox.</li>
<li><a target="_blank" rel="noopener" href="https://linshiyouxiang.net/">临时邮箱 - 十秒钟内收到邮件</a>: A very good temporary email provider, I have used this site to register for many forums that require email logins for temporary use. But the email here doesn’t seem to register with bitbucket, at least not for me. Also this email address is prompted with “Your account has been flagged. Because of that, your profile is hidden from github” after registering for github, you can appeal here but given the time cost and the need for temporary use, I’ve opted out.</li>
<li><a target="_blank" rel="noopener" href="http://24mail.chacuo.net/">24mail</a>: No registration is required and the mailbox lasts 24 hours, which is longer than a ten-minute mailbox (10 minutes). You can set any mailbox name and change your mailbox at any time. However, after trying, there are some websites that do not support this mailbox, such as github.</li>
</ul>
<blockquote>
<p>There are other free temporary mailboxes or alternate mailboxes that do not require a mobile number to be registered, which will be added here in the future after testing.</p>
</blockquote>
<h1 id="Sign-up-for-bitbucket-or-github-using-your-email-address"><a href="#Sign-up-for-bitbucket-or-github-using-your-email-address" class="headerlink" title="Sign up for bitbucket or github using your email address"></a>Sign up for bitbucket or github using your email address</h1><p>This step should not be difficult, make sure that your github account is not flagged. If it is, please send an email requesting to be unblocked or change your registered email address.</p>
<h1 id="Configuring-local-SSH"><a href="#Configuring-local-SSH" class="headerlink" title="Configuring local SSH"></a>Configuring local SSH</h1><h2 id="1-Open-the-git-Bash"><a href="#1-Open-the-git-Bash" class="headerlink" title="1. Open the git Bash"></a>1. Open the git Bash</h2><p>Open a git Bash command window anywhere and type the following command to access the .ssh directory:</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> ~/.ssh</span><br></pre></td></tr></table></figure>
<p>If the path does not exist, you will need to manually create this folder in <code>C:\Users\yourAccountName\.ssh</code>.</p>
<h2 id="2-Generate-SSH-for-different-accounts"><a href="#2-Generate-SSH-for-different-accounts" class="headerlink" title="2. Generate SSH for different accounts"></a>2. Generate SSH for different accounts</h2><p>Generate the corresponding ssh with the following command, and run as many lines of the corresponding command as the number of accounts needed for ssh.</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C <span class="string">&quot;theEmailRegisted@email.com&quot;</span> -f <span class="string">&quot;githubForWeb_id_rsa&quot;</span></span><br><span class="line">$ ssh-keygen -t rsa -C <span class="string">&quot;theEmailRegisted@email.com&quot;</span> -f <span class="string">&quot;bitbucketTemp_id_rsa&quot;</span></span><br></pre></td></tr></table></figure>
<h2 id="3-Copy-the-public-key-to-platforms-such-as-github"><a href="#3-Copy-the-public-key-to-platforms-such-as-github" class="headerlink" title="3. Copy the public key to platforms such as github"></a>3. Copy the public key to platforms such as github</h2><ul>
<li>Execute the command <code>cat ~/.ssh/githubForWeb_id_rsa.pub</code> and copy the second line to the end to the ssh of github and save it.</li>
<li>Or you can simply open the file directory and find the corresponding public key file <code>githubForWeb_id_rsa.pub</code>, then open the file with an editor and copy all its contents to the SSH settings of your account.</li>
</ul>
<p>The same operation can be used to add SSH keys for platforms such as bitbucket, gitee, etc.</p>
<h2 id="4-Create-config-file-to-resolve-ssh-conflicts"><a href="#4-Create-config-file-to-resolve-ssh-conflicts" class="headerlink" title="4. Create config file to resolve ssh conflicts"></a>4. Create config file to resolve ssh conflicts</h2><p>Execute the command <code>vi config</code> in the .ssh folder and add the following to the file</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># github</span></span><br><span class="line">Host myWebOnGithub</span><br><span class="line">HostName github.com</span><br><span class="line">PreferredAuthentications publickey</span><br><span class="line">IdentityFile ~/.ssh/githubForWeb_id_rsa</span><br><span class="line"></span><br><span class="line"><span class="comment"># bitbucket</span></span><br><span class="line">Host myWebOnBitbucket.org</span><br><span class="line">HostName bitbucket.org</span><br><span class="line">PreferredAuthentications publickey</span><br><span class="line">IdentityFile ~/.ssh/bitbucketTemp_id_rsa</span><br></pre></td></tr></table></figure>
<p>Once the configuration is complete, use <code>:wq</code> to save and exit the editor. You can change the Host and HostName as required, and you can just create a new <code>config</code> file in the folder and right click to edit it.</p>
<h2 id="Test"><a href="#Test" class="headerlink" title="Test"></a>Test</h2><p>Test each of the following codes separately:</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@myWebOnGithub</span><br></pre></td></tr></table></figure>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@myWebOnBitbucket.org</span><br></pre></td></tr></table></figure>
<p>If there is no problem it will say that the login was successful, but it may say something like <code>but GitHub does not provide shell access</code>. This does not affect the connection and means that the configuration has been successful.</p>
<h1 id="Create-a-cloud-repository-with-a-specific-name"><a href="#Create-a-cloud-repository-with-a-specific-name" class="headerlink" title="Create a cloud repository with a specific name"></a>Create a cloud repository with a specific name</h1><p>Create a repository in github named <code>username.github.io</code>, e.g. if the username is <code>AbAdAnniversary</code>, you need to create a repository named <code>AbAdAnniversary.github.io</code>.</p>
<p>If you are using bitbucket, the repository name needs to be <code>username.bitbucket.io</code>; the same naming convention applies to platforms such as gitee</p>
<h1 id="Push-local-repositories-to-the-cloud"><a href="#Push-local-repositories-to-the-cloud" class="headerlink" title="Push local repositories to the cloud"></a>Push local repositories to the cloud</h1><p>With git installed correctly, start git Bash from the root of your local repository.</p>
<ul>
<li><p>Type <code>git init</code> on the command line to turn the folder into a manageable Git repository;</p>
</li>
<li><p>Then you can add the file via <code>git add .</code>(note the “.” with spaces in it, “.” means that all the directories under this folder are committed. You can also add a file to the cache by <code>git add filename</code>);</p>
</li>
<li><p>[Option] You can then check the current status by using the git status command;</p>
</li>
<li><p>Then, use the command <code>git commit -m &quot;write your comments here&quot;</code> to commit the file to the local repository;</p>
</li>
<li><p>Connecting to a remote warehouse:</p>
<ul>
<li><p>Test the corresponding SSH with the command <code>ssh -T git@myWebOnBitbucket.org</code>;</p>
</li>
<li><p>Linked remote and local repositories now, Enter the following command in the local repository Git Bash:</p>
<p><code>$ git remote add origin git@github.com:username/repositoryName.git</code> The git address after origin can be obtained via clone from the cloud repository, both SSH and HTTP methods are available. SSH is preferred.</p>
</li>
</ul>
</li>
<li><p>Once the association is done we can push all the content from the local repository to the remote repository:</p>
<p><code>$ git push -u origin master</code></p>
</li>
</ul>
<p>If the remote repository contains files that are not in the local repository, a direct push will report an error. For example, when creating a new repository, “Initialize this repository with a README” is checked, but the local repository does not have this file. Here you can pull the contents of the remote repository locally, merge it and commit it:</p>
<ul>
<li><code>$ git pull --rebase origin master</code></li>
<li><code>$ git push -u origin master</code></li>
</ul>
<p>This can also be pushed through tools such as sourcetree, where we can first clone from the remote repository and then push, while taking care to set the SSH Key for sourcetree to ensure write access.</p>
<h1 id="Option-Binding-personal-domains"><a href="#Option-Binding-personal-domains" class="headerlink" title="[Option] Binding personal domains"></a>[Option] Binding personal domains</h1><h2 id="Adding-DNS-records"><a href="#Adding-DNS-records" class="headerlink" title="Adding DNS records"></a>Adding DNS records</h2><p>Open the console in the Personal Domain Name Service platform you purchased, click on Resolve Domain Name (DNS) and create the following DNS record:</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://gcore.jsdelivr.net/gh/shimmerjordan/pic_bed@main/blog/2021/01/25/sqg9pD.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">The red arrows point out the necessary DNS (First & second), the rest are baidu's and google's webmaster statistics tools</div>
</center>

<p>Note the types of these two DNSs. For the record of type A, fill in @ for Name (here I’m using CloudFlare so I’m filling in my personal domain address) and the ip address for username.github.io for content. This ip can be obtained by <code>ping username.github.io</code>. Since my username of github is shimmerjordan, I put shimmerjordan here.</p>
<h2 id="Adding-CNAME-file"><a href="#Adding-CNAME-file" class="headerlink" title="Adding CNAME file"></a>Adding CNAME file</h2><p>Create a new CNAME file in the local repository root directory and edit its contents to your personal domain name. In my case, for example, the CNAME file will read blog.shimmerjordan.eu.org. be sure to note that the CNAME file does not have any suffixes. Then push it to the remote repository.</p>
<h2 id="Go-to-github-settings-and-bind-the-domain-name"><a href="#Go-to-github-settings-and-bind-the-domain-name" class="headerlink" title="Go to github settings and bind the domain name"></a>Go to github settings and bind the domain name</h2><p>In the repository settings, pull down to the bottom and find GitHub Pages, select the appropriate source branch and fill in the Custom domain with your personal domain name. Finally, check Enforce HTTPS if required and select Theme Chooser.</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://gcore.jsdelivr.net/gh/shimmerjordan/pic_bed@main/blog/2021/01/25/sqRclD.png" width=70%>
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">My Case</div>
</center>

<p>Click save to complete the domain binding.</p>
<h1 id="Attachment"><a href="#Attachment" class="headerlink" title="Attachment"></a>Attachment</h1><p>This is all I have done, and here are the current pages I have successfully deployed by this method:</p>
<ul>
<li><p><a href="https://blog.shimmerjordan.eu.org/">My blog</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://cv.shimmerjordan.eu.org/">My CV</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://ruichenzhao.bitbucket.io/">My grilfriend’s CV</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://abadanniversary2.bitbucket.io/">A little surprise for our second anniversary</a></p>
</li>
</ul>
 
      <!-- reward -->
      
      <div id="reword-out">
        <div id="reward-btn">
          打赏
        </div>
      </div>
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>版权声明： </strong>
          
          本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://blog.shimmerjordan.eu.org/2021/01/24/freeWebpage/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Web-deployment/" rel="tag">Web deployment</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/git/" rel="tag">git</a></li></ul>

    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2021/01/27/freeWebpageCDN/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            Free CDN for WebPage
          
        </div>
      </a>
    
    
      <a href="/2020/12/08/addTwoNumbers/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">Add Two Numbers</div>
      </a>
    
  </nav>

   
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "StYfTMDp78X0EltFR16ve2q5-gzGzoHsz",
    app_key: "G4RPxRpXG6RwdfpnJefOSnyy",
    path: window.location.pathname,
    avatar: "wavatar",
    placeholder: "ヾﾉ≧∀≦)o来啊，快活啊!",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<style>
  #vcomments-box {
    padding: 5px 30px;
  }

  @media screen and (max-width: 800px) {
    #vcomments-box {
      padding: 5px 0px;
    }
  }

  #vcomments-box #vcomments {
    background-color: #fff;
  }

  .v .vlist .vcard .vh {
    padding-right: 20px;
  }

  .v .vlist .vcard {
    padding-left: 10px;
  }
</style>

 
   
   
<!-- minivaline评论 -->
<div id="mvcomments-box">
  <div id="mvcomments"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/minivaline@latest"></script>
<script>
    new MiniValine(Object.assign({"enable":true,"mode":"DesertsP","placeholder":"Write a Comment","math":true,"md":true,"enableQQ":true,"NoRecordIP":false,"visitor":true,"maxNest":6,"pageSize":6,"adminEmailMd5":"de8a7aa53d07e6b6bceb45c64027763d","tagMeta":["管理员","小伙伴","访客"],"master":["de8a7aa53d07e6b6bceb45c64027763d"],"friends":["b5bd5d836c7a0091aa8473e79ed4c25e","adb7d1cd192658a55c0ad22a3309cecf","3ce1e6c77b4910f1871106cb30dc62b0","cfce8dc43725cc14ffcd9fb4892d5bfc"],"lang":null,"emoticonUrl":["https://cdn.jsdelivr.net/npm/alus@latest","https://cdn.jsdelivr.net/gh/MiniValine/qq@latest","https://cdn.jsdelivr.net/gh/MiniValine/Bilibilis@latest","https://cdn.jsdelivr.net/gh/MiniValine/tieba@latest","https://cdn.jsdelivr.net/gh/MiniValine/twemoji@latest","https://cdn.jsdelivr.net/gh/MiniValine/weibo@latest"]}, {
	  el: '#mvcomments',
    }));
  const infoEle = document.querySelector('#mvcomments .info');
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
      infoEle.childNodes.forEach(function (item) {
          item.parentNode.removeChild(item);
      });
  }
</script>
<style>
	#mvcomments-box {
		padding: 5px 30px;
	}
	@media screen and (max-width: 800px) {
		#mvcomments-box {
		  padding: 5px 0px;
		}
	}
	.darkmode .MiniValine *{
		color: #f1f1f1!important;
	}
	.darkmode .commentTrigger{
		background-color: #403e3e !important;
	  }
	.darkmode .MiniValine .vpage .more{
		background: #21232F
	}
	.darkmode img{
		filter: brightness(30%)
	}
	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:before{
		background: linear-gradient(180deg, rgba(246,246,246,0), rgba(0,0,0,0.9))
	}
	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:after{
		background: rgba(0,0,0,0.9)
	}
	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment pre{
		background: #282c34
		border: 1px solid #282c34
	}
	.darkmode .MiniValine .vinputs-area .textarea-wrapper textarea{
		color: #000;
	}
	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper input{
		color: #000;
	}
	.darkmode .MiniValine .vinputs-area .vextra-area .vsmile-icons{
		background: transparent;
	}
	.darkmode .MiniValine .vinputs-wrap{
		border-color: #b2b2b5;
	}
	.darkmode .MiniValine .vinputs-wrap:hover{
		border: 1px dashed #2196f3;
	}
	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper{
		border-bottom: 1px dashed #b2b2b5;
	}
	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper:hover{
		border-bottom: 1px dashed #2196f3;
	}
	.darkmode .MiniValine .vbtn{
		background-color: transparent!important;
	}
	.darkmode .MiniValine .vbtn:hover{
		border: 1px dashed #2196f3;
	}
</style>

    
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2019-2024
        <i class="ri-heart-fill heart_icon"></i> 鞠桥丹-QIAODAN JU
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        由 <a href="https://hexo.io" target="_blank">Hexo</a> 强力驱动
        <span class="division">|</span>
        主题 - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s4.cnzz.com/z_stat.php?id=1279035150&amp;web_id=1279035150'></script>
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="丛烨-shimmerjordan"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">Home</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">Catalogue</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">Tags</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E9%9A%8F%E7%AC%94/">Essay</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">Archives</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">Friends</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2020/01/18/about">About</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯蓝莓汁吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->


<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>

<!-- MathJax -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
  });

  MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for(i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
  var ayerConfig = {
    mathjax: true
  }
</script>

<!-- Katex -->

<!-- busuanzi  -->


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<!-- ClickLove -->


<script src="/js/clickLove.js"></script>


<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->


<link rel="stylesheet" href="/css/clipboard.css">

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>


<!-- CanvasBackground -->


<script src="/js/dz.js"></script>



    
  </div>
</body>

</html>